import React from 'react';
import classNames from 'classnames';
import styles from './index.less';

/**
 * 头部两列设置布局
 * @param {JSXElement | HTMLElement} left 左边内容
 * @param {JSXElement | HTMLElement} right 右边内容
 * @param {string} className 最外层的类名
 * @param {object} style 最外层的样式
 * @param {object} rightStyle 右边元素的样式
 * @param {boolean} [addMarginInRightChild = true] 是否在右边孩子节点之间自动增加留白
 * @param {boolean} [addMarginAtOuter = true]  是否在最外层增加留白
 * @returns {JSX.Element}
 */
export default ({
    left,
    right,
    className,
    style,
    rightStyle = {},
    addMarginInRightChild = true,
    addMarginAtOuter = true
}) => (
    <div
        className={classNames(styles.TwoColHeader, className, { [styles.defaultMargin]: addMarginAtOuter })}
        style={style}
    >
        <div className={styles.left}>{left}</div>
        <div className={classNames(styles.right, { [styles.dividerMargin]: addMarginInRightChild })} style={rightStyle}>
            {right}
        </div>
    </div>
);
